<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Create an Account</title>
    <link rel="stylesheet" href="signuppage/css/register.css"/>
    <link rel="Shortcut Icon" href="utils/img/logo.ico" type="image/x-icon"/>
    <script src="utils/js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="utils/js/request.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app" class="app-model">
    <!-- The header of the registration page -->
    <div id="header" class="sig-header">
        <!-- The logo of the web -->
        <img src="signuppage/img/logo1.png"
             width="350px" height="160px" alt="The logo" >
    </div>

    <div id="main">
        <div class="register-wrap">
            <!-- "r-model" class is used to design the background of the form -->
            <div id="create" class="r-model">
                <div class="model-header" style="font-size: 18px; color: white">
                    <h3>Register</h3>
                </div>
                <!-- The account information, and the user needs to finish them -->
                <div class="account-information">
                    <form action="/create" method="post" id="post_form">
                        <!-- The username -->
                        <div class="r-label">
                            <label for="username">Username </label>
                        </div>
                        <div class="r-input-box">
                            <input type="text" name="username" id="username" placeholder="Username" v-model="username"
                                   class="input-field" maxlength="40" autocomplete="off" autocapitalize="off" autocorrect="off"/>
                        </div>
                        <!-- The password -->
                        <div class="r-label">
                            <label for="password">Password </label>
                        </div>
                        <div class="r-input-box">
                            <!-- Use the "password" type to ensure the safety -->
                            <input type="password" name="password" id="password" placeholder="Password" v-model="password"
                                   class="input-field" maxlength="40" autocomplete="off" autocapitalize="off" autocorrect="off"/>
                        </div>
                        <!-- Input the password again and confirm whether both are the same -->
                        <div class="r-label">
                            <label for="repassword">Confirm Password </label>
                        </div>
                        <div class="r-input-box">
                            <input type="password" name="repassword" id="repassword" placeholder="Confirm Password" v-model="repassword"
                                   class="input-field" maxlength="40" autocomplete="off" autocapitalize="off" autocorrect="off"/>
                        </div>
                        <!-- The e-mail -->
                        <div class="r-label">
                            <label for="email">E-mail Address </label>
                        </div>
                        <div class="r-input-box">
                            <input type="text" name="email" id="email" placeholder="E-mail Address" v-model="email"
                                   class="input-field" maxlength="40" autocomplete="off" autocapitalize="off" autocorrect="off"/>
                        </div>
                        <!-- The university -->
                        <div class="r-label">
                            <label for="university">University </label>
                        </div>
                        <div class="r-input-box">
                            <input type="text" name="university" id="university" placeholder="Unversity" v-model="university"
                                   class="input-field" maxlength="40" autocomplete="off" autocapitalize="off" autocorrect="off"/>
                        </div>
                        <div class="r-label">
                            <label for="position">Position</label>
                        </div>
                        <div class="r-select">
                            <select name="position" id="position" v-model="choosePosition" class="input-field">
                                <option disabled value=""></option>
                                <!-- The disabled value is built to avoid the mistake in iOS system-->
                                <option v-for="item in positions" :value ="item">{{item}}</option>
                                <!-- Get the choices of positions from a list, and use v-model to get the item -->
                            </select>
                        </div>
                        <div class="accept-protocol" style="color: white">
                            <input type="checkbox" name="accept-protocol" id="accept-protocol" >
                            I accept the protocol
                            <a href="/protocol" target="_blank" style="text-decoration: none; color: white;" > 《YesPaper Privacy》</a>
                            .
                        </div>
                    </form>
                    <!-- Submit all the information above -->
                    <div id="button" class="create-button">
                        <button type="submit" @click="createEvent" class="r-button">Create</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">
    let main = new Vue({
        el:"#main",
        data:{
            username:'',
            password:'',
            repassword:'',
            email:'',
            university:'',
            positions:['reviewer', 'writer', 'reviewer&writer', 'university'],
            choosePosition:'',
        },
        methods:{
            createEvent: function () {
                // First check whether the user accept the web protocol
                if (document.getElementById("accept-protocol").checked == false)
                    alert("You have not accept the protocol.");
                else {
                    // Then check whether the user have finished all the information
                    if (this.username == false || this.password == false || this.repassword == false || this.email == false || this.university == false || this.choosePosition == false)
                        alert("Your information is not completed.");
                    else {
                        // Check whether the two passwords are the same
                        if (this.password == this.repassword) {
                            let con = confirm("Ready to create a new account?");
                            if (con) {
                                // alert("Registration succeed.");
                                // document.getElementById("post_form").submit();
                                var returnValue = formRequest("/create", "post", "post_form");
                                alert(returnValue.msg);
                                if(returnValue.code){
                                    // 跳转主页
                                    window.location.href="/";
                                }
                            } else {
                                alert("Registration cancel.");
                            }
                        } else {
                            alert("The two passwords are different. Please check again");
                        }
                    }
                }
            }
        }
    })
</script>
</html>
